<template>
    <div class="orderSuccess">
        <!-- <div class="order-box">
            <van-image class="order-img" :src="require('../../assets/image/chneggong.png')"></van-image>
            <div class="order-info">
                <div class="order-num">订单编号: {{ordersForm.ordersNo}}</div>
                <div class="order-money">应付金额: ${{ordersForm.ordersPrice}} </div>
            </div>
        </div>

        <div class="order-time" v-if="time">
            <van-count-down class="time" :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
            <div class="order-time-info">后失效</div>
        </div>

        <div class="order-pay" v-if="ordersForm.ordersPayType == 1">
            <div class="pay-title">请尽快联系负责人进行线下交易</div>
            
            <div class="pay-name">负责人: {{ordersForm.userName}}</div>
            <div class="pay-phone">电话: {{ordersForm.userPhone}}</div>
            <div class="btns">
                <van-button plain round type="primary" class="pay-phone-btn" @click="phoneCall(ordersForm.userPhone)">拨打电话</van-button>
            </div>
        </div>
        <div class="order-pay2" v-if="ordersForm.ordersPayType == 2">
            <div class="pay-title">请尽快联系负责人进行线下交易</div>
            <div class="pay-name">银行名称</div>
            <div class="pay-phone">13324561234123132156165</div>
            <div class="pay-name">负责人: {{ordersForm.userName}}</div>
            <div class="pay-phone">电话: {{ordersForm.userPhone}}</div>
            <div class="btns">
                <van-button plain round type="primary" class="pay-phone-btn pay-phone-btn2" @click="copyText">复制银行卡</van-button>
                <van-button plain round type="primary" class="pay-phone-btn" @click="phoneCall(ordersForm.userPhone)">拨打电话</van-button>
            </div>
        </div> -->

        <van-image class="order-img" :src="require('../../assets/image/chneggong.png')"></van-image>
        <div class="success-hint">
            <p>{{  $i18n.t('default.home.payTip') }}</p>
            <!-- <p>Выплата завершена</p>
            <p>Пожалуйста, проконсультируйтесь с руководителем</p>
            <p>по поводу заказанных товаров.</p> -->
        </div>
        <div style="height: 1rem;"></div>
        <div class="fixed-bottom">
            <van-button 
                size="large" 
                class="btn home-button" 
                @click="gotoPage"
            >{{  $i18n.t('default.other.backHome') }}</van-button>
        </div>
    </div>
</template>

<script>

export default {
  data() {
    return {
        isSite: false,
        time: null,
        type: 1,
        ordersForm:{

        },
    }
  },

  created() {
    this.ordersID = this.$route.query.ordersID; 
    this.init();
  },
  methods: {
    init(){
        // 	/orders/info/{ordersID}
        this.$api.get('/orders/info/'+this.ordersID).then(res=>{
            if(res.code == 'SUCCESS'){
                this.ordersForm = res.data;
                this.time = this.ordersForm.createTime + 3 * 24 * 60 * 60 * 1000 - new Date().getTime();
            }
        })

    },
    phoneCall(msg){
        window.location.href = 'tel://'+msg
    },
    gotoPage(){
        this.$router.push({path: '/'})
    },
    copyText(){
        const textToCopy = this.ordersForm.ordersNo; // 你要复制的文本内容
        console.log('navigator.clipboard: ',navigator.clipboard)
        // if(navigator.clipboard){
        //     navigator.clipboard.writeText(textToCopy).then(() => {
        //         this.$toast.success('复制成功');
        //     }).catch(err => {
        //         this.$toast.error('复制失败', err);
        //     });
        // }
        // navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
        //     if (result.state === 'granted' || result.state === 'prompt') {
        //         try {
        //             navigator.clipboard.writeText('Some text').then(() => {
        //                 console.log('Text copied successfully');
        //             }).catch(err => {
        //                 console.error('Failed to copy text: ', err);
        //             });
        //         } catch (error) {
        //             console.error('Clipboard API is not available or an error occurred:', error);
        //         }
        //     } else {
        //         console.log('Permission not granted.');
        //     }
        // });
    }
  }
}

</script>

<style scoped lang="scss">
@import "@/assets/css/variable.scss";
.orderSuccess{
    padding: .5rem .3rem 0;
    background: #FFFFFF;
    // text-align: center;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
}
// .order-box{
//     width: 100%;
//     height: 2rem;
//     border-radius: 10px;
//     border: 1px solid #D6D7DC;
//     display: flex;
//     align-items: center;
//     padding-left: .4rem;
//     .order-img{
//         width: 1.4rem;
//         height: 1.4rem;
//         margin-top: 1.32rem;
//     }
//     .order-info{
//         padding-left: .3rem;
//         font-size: .3rem;
//         .order-money{
//             margin-top: .2rem;
//         }
//     }
// }

// .order-time{
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     justify-content: center;
//     margin-top: .3rem;
//     font-size: .48rem;
//     color: $money;
//     margin-top: 1.1rem;
//     .time{
//         font-size: .48rem;
//         color: $money;
//     }
//     .order-time-info{
//         font-size: .3rem;
//         margin-left: .2rem;
//         margin-top:.18rem;
//     }
// }
// .order-pay{
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     margin-top: 1rem;
//     padding-bottom: .5rem;
//     border-radius: 10px;
//     border: 1px solid #D6D7DC;
//     .pay-title{
//         font-size: .36rem;
//         margin-top: .4rem;
//     }
//     .pay-name{
//         margin-top: .28rem;
//     }
//     .pay-phone{
//         margin-top: .13rem;
//     }
//     .btns{
//         margin-top: .26rem;
//     }
//     .pay-phone-btn{
//         width: 2.2rem;
//         height: .68rem;
//     }
// }

// .order-pay2{
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     margin-top: 1rem;
//     padding-bottom: .5rem;
//     border-radius: 10px;
//     border: 1px solid #D6D7DC;
//     .pay-title{
//         font-size: .36rem;
//         margin-top: .4rem;
//     }
//     .pay-name{
//         margin-top: .28rem;
//     }
//     .pay-phone{
//         margin-top: .13rem;
//     }
//     .btns{
//         margin-top: .26rem;
//     }
//     .pay-phone-btn{
//         width: 2.2rem;
//         height: .68rem;
//     }
//     .pay-phone-btn2{
//         margin-right: .6rem;
//     }
// }

.order-img{
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 1.32rem;
}
.success-hint{
    margin-top: .4rem;
    font-size: .32rem;
    color: #323232;
    line-height: .4rem;
    p{
        margin-bottom: .3rem;
    }
}

.fixed-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    .btn{
        height: 1rem;
        border-radius: 0;
        font-size: .36rem;
    }
}
</style>